import { createApp } from './vue.esm-browser.js'
import { SSE } from "./sse.min.js"

createApp({
    data() {
        return {
            showConfig: false,
            configFields: [
                {
                    name: "endPoint",
                    type: "text",
                    label: "End Point"
                },
                {
                    name: "apiKey",
                    type: "text",
                    label: "API Key"
                },
                {
                    name: "model",
                    type: "text",
                    label: "Model"
                },
                {
                    name: "temperature",
                    type: "number",
                    label: "Temperature"
                },
                {
                    name: "presence_penalty",
                    type: "number",
                    label: "Presence Penalty"
                },
                {
                    name: "top_p",
                    type: "number",
                    label: "Top P"
                },
                {
                    name: "frequency_penalty",
                    type: "number",
                    label: "Frequency Penalty"
                },
            ],
            isLoading: false,
            message: '',
            messages: [],
            config: {
                endPoint: "",
                apiKey: "",
                model: "gpt-3.5-turbo",
                temperature: 1,
                presence_penalty: 0,
                top_p: 1,
                frequency_penalty: 0,
                stream: true
            }
        }

    },
    methods: {
        refresh() {
            this.send(true);
        },
        sendMessage() {
            this.messages.push({
                role: "user",
                content: this.message
            });
            this.send();
            this.message = "";
        },
        send(refresh = false) {
            this.isLoading = true;
            let data = {
                "messages": this.messages,
                ...this.config
            }

            if (refresh) {
                this.messages.pop();
                this.messages.push({
                    role: "assistant",
                    content: ""
                });
            }
            let addedMsg = false;
            var source = new SSE(this.config.endPoint, {
                headers: {
                    "accept": "*/*",
                    'content-type': 'application/json',
                    authorization: 'Bearer ' + this.config.apiKey,
                },
                payload: JSON.stringify(data),
                method: 'POST'
            });
            source.addEventListener('message', (e) => {
                if (!addedMsg && !refresh) {
                    this.messages.push({
                        role: "assistant",
                        content: ""
                    });
                    addedMsg = true;
                }
                try {
                    var payload = JSON.parse(e.data);
                    if (payload.choices[0].finish_reason == "stop") {
                        this.isLoading = false;
                        return;
                    }
                    const message = payload.choices[0].delta.content;
                    if (message) {
                        this.messages[this.messages.length - 1].content += message;
                    }
                } catch (e) {
                }
            });
            source.addEventListener('error', (error) => {
                console.error('Error:', error);
                source.close();
                this.isLoading = false;
            });
        }
    },
    watch: {
        config: {
            deep: true,
            handler(newConfig) {
                if (newConfig) {
                    localStorage.setItem("config", JSON.stringify(newConfig));
                }
            }
        }
    },
    mounted() {
        if (localStorage.getItem("config")) {
            this.config = JSON.parse(localStorage.getItem("config"));
        }
    },
}).mount('#app')